<%--
  Created by IntelliJ IDEA.
  User: SITA
  Date: 2017/6/27
  Time: 下午4:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" pageEncoding="utf-8" contentType="text/html;charset=utf-8" %>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="page" %>
<page:page>
    <!--分页-->
    <script src="../js/page.js"></script>

    <div class="row">
        <!-- 顶部查询  -->
        <div class="col-lg-12  page-header">
            <div class="col-md-3">
                <div class="form-group">
                    <span for="search_plateNumber">车牌号</span>
                    <span>
                        <input type="text" class="form-control" name="search_plateNumber" id="search_plateNumber" size="20" maxlength="50"/>
                        <input type="text" id="platformCode" value="${sessionScope.account.platform_code}" hidden>
                    </span>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <span for="search_controllerId">中控号</span>
                    <span>
                        <input type="text" class="form-control " name="search_controllerId" id="search_controllerId" size="20" maxlength="50"/>
                    </span>
                </div>
            </div>

            <div class="col-md-2" style="padding-top: 20px;">
                <div class="form-group">
                    <button type="button" class="btn btn-outline btn-primary btn-sm" onclick="searchData()"><i class="fa fa-search"></i>&nbsp;查询</button>
                </div>
            </div>
        </div>
        <!--列表开始-->
        <div class="col-lg-12">
            <div class="datagrid_container" style="margin-top: 10px;">
                <!-- /.row -->
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            车辆信息
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="dataTable_wrapper">
                                <table class="table table-striped table-bordered table-hover tablefont" id="dataTables-example">
                                    <thead>
                                    <tr>
                                        <th style="width:3%"><input type="checkbox" id="checkAll"/></th>
                                        <th style="width:14%">车牌号</th>
                                        <th style="width:14%">中控号</th>
                                        <th style="width:20%">中控鉴权码</th>
                                        <th style="width:12%">GPSID</th>
                                        <th style="width:12%">ICCID</th>
                                        <th style="width:12%">所属平台</th>
                                        <th style="width:12%">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbody">
                                    </tbody>
                                </table>
                            </div>

                            <!-- /.table-responsive -->
                            <div class="row">
                                <div class="col-sm-2" style="padding-top: 25px">
                                    <div class="dataTables_length">
                                        <select name="dataTables-example_length" onchange="pageCount()"
                                                id="dataTables-example_length" aria-controls="dataTables-example"
                                                class="form-control input-sm">
                                            <option value="10">每页10行</option>
                                            <option value="25">每页25行</option>
                                            <option value="50">每页50行</option>
                                            <option value="100">每页100行</option>
                                        </select>
                                    </div>

                                </div>
                                <div class="col-sm-3" style="padding-top: 30px">
                                    <div class="dataTables_info" id="dataTables-example_info" role="status"
                                         aria-live="polite"></div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="dataTables_paginate paging_simple_numbers"
                                         id="dataTables-example_paginate">
                                        <ul class="pagination" id="paginationPage">
                                            <li class="page active" class="paginate_button"
                                                aria-controls="dataTables-example"
                                                tabindex="0"><a href="#">1</a></li>
                                            <li class="page" class="paginate_button " aria-controls="dataTables-example"
                                                tabindex="1"><a href="#">2</a></li>
                                            <li class="page" class="paginate_button " aria-controls="dataTables-example"
                                                tabindex="2"><a href="#">3</a></li>
                                            <li class="page" class="paginate_button " aria-controls="dataTables-example"
                                                tabindex="3"><a href="#">4</a></li>
                                            <li class="page" class="paginate_button " aria-controls="dataTables-example"
                                                tabindex="4"><a href="#">5</a></li>
                                            <li class="page" class="paginate_button " aria-controls="dataTables-example"
                                                tabindex="5"><a href="#">6</a></li>

                                        </ul>
                                        <ul class="pagination">
                                            <li class="paginate_button next" aria-controls="dataTables-example"
                                                tabindex="0" id="dataTables-example_next"><a href="#"
                                                                                             onclick="onPage(this)">Next</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--列表结束-->
    </div>


    <!--更换盒子信息Modal-->
    <div class="modal fade" id="exchangeModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">更换盒子</h4>
                </div>
                <div class="modal-body">
                    <div id="snInfo_body">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="col-md-12" class="form-group">
                                    <span for="oldControllerId">当前盒子中控号为</span>
                                    <span>
                                        <input type="text" class="form-control" name="oldControllerId" id="oldControllerId" size="20" maxlength="50" readOnly="true"/>
                                    </span>
                                </div>
                                <div class="col-md-12" class="form-group" style="margin-top: 13px;">
                                    <span for="newControllerId">请输入新盒子的中控号</span><span id="warnInfo" class="red"></span>
                                    <span>
                                        <input type="text" class="form-control" name="newControllerId" id="newControllerId" size="20" maxlength="50"/>
                                    </span>
                                </div>
                                <div class="col-md-12" class="form-group">
                                    <span for="remark">备注描述</span>
                                    <span>
                                        <textarea class="form-control" name="remark" id="remark" rows="3"></textarea>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary"  onclick="exchangeGoods_sure();">确定</button>
                    <button type="button" class="btn btn-primary"  onclick="closeModal();">取消</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <style type="text/css">
        #snInfo_body {
            width: 560px;
            height: auto;
        }

        .col-md-2{
            width:100px;
        }

        .col-md-3{
            width:200px;
        }
    </style>

    <script>
        function searchData() {
            refreshPage();
            queryList($('.active').attr("tabindex"), $("#dataTables-example_length").val());
        }

        function queryList(page, size) {
            var params = new Object();
            params.size = size;
            params.page = page;
            params.oldControllerId = $('#search_controllerId').val();
            params.plateNumber = $('#search_plateNumber').val();
            console.log(params);
            $.ajax({
                url: '${pageContext.request.contextPath}/v1/machines/sn/findSns/byPlateOrCId',
                type: 'POST',
                datatype: 'json',
                contentType: 'application/json;charset=utf-8',
                Accept: 'application/json',
                data: JSON.stringify(params),
                cache: false,
                success: function (data, textStatus, jqXHR) {
                    $("#tbody").empty();
//                    console.log(data);
                    $(data.data).each(function () {
                        var plateNumber = this.plateNumber.length>12 ? this.plateNumber.substr(0,12)+"..." : this.plateNumber;
                        $("#tbody").append('<tr class="odd gradeX" >' +
                            '<td class="center"><input name="machines" type="checkbox" value="'+this.controllerId+'" /></td>' +
                            '<td class="center">' + plateNumber + '</td>' +
                            '<td class="center">' + this.controllerId + '</td> ' +
                            '<td class="center">' + this.controllerPassword + '</td>' +
                            '<td class="center">' + this.gpsId + '</td> ' +
                            '<td class="center">' + this.imsi + '</td>' +
                            '<td class="center">' + this.platformName + '</td>' +
                            '<td class="center"><a class="fa fa-exchange" href="javascript:void(0);" onclick="exchangeModal(\'' + this.controllerId + '\');">换货</a></td>' +
                            '</tr>').data("item", this);
                        $("#" + this.controllerId).attr("item", JSON.stringify(this));//直接写item属性,json串里的空格会把this分成不完整的json串,所以改为直接set值
                    });
                }
            });
        }

        function queryOne(controllerId){
            var str = $("#" + controllerId).attr("item");
            var data = JSON.parse(str);
            ////
        }

        //弹出modal框
        function exchangeModal(obj){
            $("#exchangeModal").modal('show');
            console.log(obj);
            $("#oldControllerId").val(obj);
        }
        //换货确认
        function exchangeGoods_sure(){
            var oldControllerId = $("#oldControllerId").val();
            var newControllerId = $("#newControllerId").val().toUpperCase();
            if(newControllerId == "" || newControllerId == null || newControllerId == undefined){
                $("#warnInfo").text("请填写新中控号");
                return;
            }
            if(newControllerId == oldControllerId){
                $("#warnInfo").text("您输入的新中控号与旧中控号相同");
                return;
            }
            var str = "将" + oldControllerId + "更换为" + newControllerId + ",更换后立即生效，确认操作？";
            showconfirmwithtwoargs(str,exchangeGoods,oldControllerId,newControllerId);
        }

        //换货
        function exchangeGoods(oldControllerId,newControllerId){
            var params = new Object();
            params.oldControllerId = oldControllerId;
            params.newControllerId = newControllerId;
            params.userId = '${sessionScope.account.accountId}';
            params.remark = $("#remark").val();

//            console.log(params);

            $.ajax({
                url : '${pageContext.request.contextPath}/v1/machines/sn/allocate/exchange',
                type: 'POST',
                datatype: 'json',
                contentType: 'application/json;charset=utf-8',
                Accept: 'application/json',
                cache: false,
                data: JSON.stringify(params),
                success: function (data, textStatus, jqXHR) {
                    console.log(data);
                    if(data.errorCode == 0){
                        showalert(data.errorCode,data.data);
                        closeModal();
                    }else {
                        showalert(data.errorCode,data.data);
                    }


                },
                error: function (jqXHR, textStatus, errorThrown) {
                    showalert(1,jqXHR.responseJSON.data);
                }
            });
        }

        function closeModal(){
            $("#exchangeModal").modal('hide');
            $("#oldControllerId").val("");
            $("#newControllerId").val("");
            $("#warnInfo").text("");
            $("#remark").val("");

        }



        //将页码恢复到初始状态
        function refreshPage() {
            $("#paginationPage li").removeClass("active");
            $("#paginationPage li:first").addClass("active");
        }


    </script>
    <%@include file="../alert.jsp"%>
</page:page>
